<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../第二次尝试/todolist/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div id="example-1">
				<input v-model="message" placeholder="edit me">
				<p>Message is: {{message}}</p>
				<textarea model="mseeage2" placeholder="add multiple lines"></textarea>
				<p style="white-space: pre-line;">{{message2}}</p>
				<br>
				<div style="margin-top: 20px;">
					<input type="checkbox" id="jack" value="jack" v-model="checkedNames"/>
					<label for="jack">jack</label>
					<input type="checkbox" id="john" value="john" v-model="checkedNames"/>
					<label for="john">john</label>
					<input type="checkbox" id="mike" value="mike" v-model="checkedNames"/>
					<label for="mike">mike</label>
					<br>
					<span>Checked names :{{checkedNames}}</span>
				</div>
				<div style="margin-top: 20px;">
					<input type="radio" id="one" value="one" v-model="picked"/>
					<label for="one">one</label>
					<br>
					<input type="radio" id="two" value="two" v-model="picked"/>
					<label for="two">two</label>
					<br>
					<span>Picked :{{picked}}</span>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var vm =new Vue({
				el :"#app",
				data : {
					message : "text",
					message2 :"hi",
					checkedNames : ['Jack','john'],
					picked : "Two"
				},
				methods:{
					submit : function(){
						console.log(this.message);
						var postObj={
							msg1 : this.massage,
							msg2 : this.massage2,
							checkval:this.checkedNames
						};
						console.log(postObj);
					}
				}
			});
		
			
		</script>
		<style type="text/css">
			
		</style>
	</body>
</html>
